<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <div id="game"></div>
    <p><b>2 player Pong</b><br />Move with <kbd>arrow keys</kbd> and <kbd>WS</kbd>.
    <script src="https://rawgithub.com/craftyjs/Crafty/release/dist/crafty-min.js"></script>
    <script>
        Crafty.init(600, 300, document.getElementById('game'));
        Crafty.background('rgb(127,127,127)');
        //Paddles
        Crafty.e("Paddle, 2D, DOM, Color, Multiway")
            .color('rgb(112, 175, 219)')
            .attr({ x: 20, y: 100, w: 10, h: 60 })
            .multiway(200, { W: -90, S: 90 });
        Crafty.e("Paddle, 2D, DOM, Color, Multiway")
            .color('rgb(255,140,0)')
            .attr({ x: 580, y: 100, w: 10, h: 60 })
            .multiway(200, { UP_ARROW: -90, DOWN_ARROW: 90 });
        //Ball
        Crafty.e("2D, DOM, Color, Collision")
            .color('rgb(0,200,100)')
            .attr({ x: 300, y: 150, w: 10, h: 10,
                    dX: Crafty.math.randomInt(2, 5),
                    dY: Crafty.math.randomInt(2, 5) })
            .bind('EnterFrame', function () {
                //hit floor or roof
                if (this.y <= 0 || this.y >= 290)
                    this.dY *= -1;

                if (this.x > 600) {
                    this.x = 300;
                    Crafty("LeftPoints").each(function () {
                        this.text(++this.points + " Points") });
                }
                if (this.x < 10) {
                    this.x = 300;
                    Crafty("RightPoints").each(function () {
                        this.text(++this.points + " Points") });
                }

                this.x += this.dX;
                this.y += this.dY;
            })
            .onHit('Paddle', function () {
            this.dX *= -1;
        })

        //Score boards
        Crafty.e("LeftPoints, DOM, 2D, Text")
            .attr({ x: 20, y: 20, w: 100, h: 20, points: 0 })
            .text("0 Points");
        Crafty.e("RightPoints, DOM, 2D, Text")
            .attr({ x: 515, y: 20, w: 100, h: 20, points: 0 })
            .text("0 Points");
    </script>
  </body>
</html>
